<template>
  <!-- 主对话框容器 -->
  <div class="dialog-overlay" v-if="hasActiveDialog">
    <div class="close-box">
      <el-icon>
        <ArrowUp v-if="visible" @click="visible = !visible" />
        <ArrowDown v-else @click="visible = !visible" />
      </el-icon>
      <el-icon>
        <el-icon-close @click="store.closeAll()" />
      </el-icon>
    </div>
    <transition name="el-zoom-in-top">
      <component :is="currentComponent" v-if="currentDialog && visible" />
    </transition>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useDialogStore } from '@/store/modules/useDialogStore';
import { useIsUltraWideScreen } from '@/hooks/useIsUltraWideScreen';

const { isUltraWide } = useIsUltraWideScreen();
const store = useDialogStore();

const hasActiveDialog = computed(() => store.currentDialog !== null);
const currentDialog = computed(() => store.currentDialog);
const currentComponent = computed(() => {
  if (!currentDialog.value) return null;
  // 这里使用动态导入实现代码分割
  return defineAsyncComponent(() => import(`@/views/monitoringWarning/components/dialogModule/${currentDialog.value}/index.vue`));
});
const visible = computed({
  get: () => isUltraWide.value,
  set: (newValue) => {
    isUltraWide.value = newValue;
  }
});
</script>

<style scoped>
.dialog-overlay {
  z-index: 10;
  color: #fff;
  border: 0.0625rem solid rgba(95, 175, 255, 0.502);
  background-color: rgba(7, 57, 136, 0.8);
  padding: 20px;
  box-sizing: border-box;
  box-shadow: inset 0 0 1.5625rem 0 #045bbd;
  width: 18.75rem;

  .close-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;

    .el-icon {
      cursor: pointer;
    }
  }
}
</style>
